import React, { useEffect, useRef, useState } from "react";
import { Modal,Tabs,Image,Carousel,Spin,Empty,Badge} from 'antd';
import {getThemeById,getThemeSubject,queryIntensiveByBookId,getBookSubject,getLevideoSubject,QuerylearningLevideosbyID} from 'api/index'
import {LeftCircleOutlined,RightCircleOutlined} from '@ant-design/icons'
import LlxPlay from 'components/LlxPlay'
import SubjectDialog from './subjectComponent'
const { TabPane } = Tabs;
const PreviewWordSubject = (props) => {
  const {isModalVisible, setIsModalVisible,id,type} = props

  const [spinning,setSpinning] = useState(false)
  const [subject,setSubject] = useState([])
  const [word,setWord] = useState([])
  
  const audio = useRef(null)
  const carousel = useRef()
  const carouselSubject = useRef()

  useEffect(()=>{
    isModalVisible&&getNewData()
  },[isModalVisible]) // eslint-disable-line react-hooks/exhaustive-deps


  const handleOk = async () => {
    setIsModalVisible(false);
  }

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  
  const getNewData = async() => {
    setSpinning(true)
     switch(type){
       case 'theme':
        const res = await getThemeById(id)
        const res1 = await getThemeSubject(id)
        const data = res1.result||[]
        data.forEach(i=>{
          i.showMore=true
        })
        setSubject(data)
        setWord(res.result.lessonWordFlows)
       break
       case 'book':
        const res2 = await queryIntensiveByBookId(id)
        const res3 = await getBookSubject(id)
        const data1 = res3.result||[]
        data1.forEach(i=>{
          i.showMore=true
        })
        setSubject(data1)
        setWord(res2.result.bookWordFlows)
        break
       case 'study':
        const res4 = await QuerylearningLevideosbyID(id)
        const res5 = await getLevideoSubject(id)
        const data2 = res5.result||[]
        data2.forEach(i=>{
          i.showMore=true
        })
        setSubject(data2)
        setWord(res4.result.bookWordFlows)
        break
       default:
         return
     }

     setSpinning(false)
  }

  const callback = (key) => {
    setSpinning(true)
    setTimeout(()=>{
      setSpinning(false)
    },500)
  }

  const onChange = (key) => {
    if(word.length<=1) return
    audio.current = new Audio(word[key].wdWord.audioUrl)
    audio.current.load()
    audio.current.oncanplay = async() => {
      audio.current.play()
     }
     audio.current.onended = () => {
      audio.current=null
     }
  }
  const onChangeSubject = (key) => {
  }
  const prevWord=() => {
    carousel.current.prev()
  }
  const nextWord=() => {
    carousel.current.next()
  }
  const prevSubject=() => {
    carouselSubject.current.prev()
  }
  const nextSubject=() => {
    carouselSubject.current.next()
  }
  
  return   <Modal destroyOnClose width={1000}  wrapClassName="modal-preview-subject-word"  title="课后题和单词预览" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
       <Spin tip="Loading..." spinning={spinning}>
      <Tabs defaultActiveKey="1" onChange={callback} >
       <TabPane tab="单词预览" key="1">
       <LeftCircleOutlined className="icon-left" onClick={()=>prevWord()}></LeftCircleOutlined>
       <RightCircleOutlined className="icon-right"  onClick={()=>nextWord()}></RightCircleOutlined>

           <Carousel ref={carousel} afterChange={onChange}>
               {
                 word.length?word.map((i,j)=>{
                   return  <div key={j} className="word">
                      
                      <Badge.Ribbon color={'green'} style={{left:'0px'}} text={j+1 + '/' +  word.length} placement={'start'}>
  
                      <div className="main">
                           <h1>{ i.wdWord.wordName }</h1>

                            <div>词性：{ i.wdWord.pofName }</div>
                            <div>中文：{ i.wdWord.chineseExplain }</div>
                            <div>音频： <LlxPlay audioUrl={i.wdWord.audioUrl}></LlxPlay></div>
                      </div>


                      <div className="pictures">
                         {
                           i.picture&&i.picture.length?i.picture.map(item=>{
                             return  <Image
                             key={item}
                             width={150}
                             src={item}
                           />
                           }):''
                         }
                      </div>
                      </Badge.Ribbon>
 
                  </div>
                 }):<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
               }

           </Carousel>
       </TabPane>
       <TabPane tab="课后题预览" key="2">
       <LeftCircleOutlined className="icon-left" onClick={()=>prevSubject()}></LeftCircleOutlined>
       <RightCircleOutlined className="icon-right"  onClick={()=>nextSubject()}></RightCircleOutlined>
          <Carousel ref={carouselSubject} afterChange={onChangeSubject}>
               {
                 subject.length?subject.map((i,j)=>{
                   return  <div key={j} className="word">
                      <SubjectDialog count={subject.length} sort={j+1} subjectItem={i} setShow={(x,value)=>i.showMore=value}></SubjectDialog>
                  </div>
                 }):<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
               }
           </Carousel>
       </TabPane>
     </Tabs>
     </Spin>
   </Modal>

}
export default PreviewWordSubject